{% extends "base.html" %}
{% set page = 'prefixes' %}

{% block head %}

<script>

	prefix_link_type = 'edit';
	current_page = 'prefix_list';

	/*
	* Handles the query passed in the URL, if any.
	*/
	function handleUrlQuery() {

		// Is there a query string in the URL?
		if ($.url().fparam('/query_string') == null) {
			return true;
		}

		// query_string
		$("#query_string").val(decodeURIComponent($.url().fparam('/query_string')));

		// search_opt_parent
		if ($.url().fparam('search_opt_parent') != null) {
			$('input[name="search_opt_parent"][value="' + decodeURIComponent($.url().fparam('search_opt_parent')) + '"]').attr('checked', true);
		}

		// search_opt_child
		if ($.url().fparam('search_opt_child') != null) {
			$('input[name="search_opt_child"][value="' + decodeURIComponent($.url().fparam('search_opt_child')) + '"]').attr('checked', true);
		}

		// explicit
		if ($.url().fparam('explicit') != null) {
			if (decodeURIComponent($.url().fparam('explicit')) == 'true') {
				explicit = true;
				} else {
				explicit = false;
			}
		}

	}

	function onPageShowOrPopState() {

		// hide open popup menus
		hidePopupMenu();

		// populate data from URL
		handleUrlQuery();

	}

	/*
	* Things to do on page load.
	*/
	$(function () {

		// register function for pageshow & popstate events
		$(window).on('pageshow', function(evt) {

			onPageShowOrPopState();

		});

		$(window).on('popstate', function(evt) {
			// Skip initial popstate which occurrs in Google Chrome when
			// loading a page for the first time
			var initialPop = !popped && location.href == initialURL;
			popped = true;
			if (initialPop) return;

			onPageShowOrPopState();

			// Perform prefix search
			performPrefixSearch(null, false);

		});

		// the floating column header
		var div = $('#floating_prefix_header');

		$.event.add(window, "scroll", function() {
			var start = $('#fixed_prefix_header').offset().top;
			var p = $(window).scrollTop();
			$(div).css('visibility', ((p)>start) ? 'visible' : 'hidden');
		});

		// register events
		$("form").submit(function(e) {
			performPrefixSearch(true);
			e.preventDefault();
		});
		$("#query_string").keyup(prefixSearchKey);
		$('input[name="search_opt_parent"]').change(performPrefixSearch);
		$('input[name="search_opt_child"]').change(performPrefixSearch);

		// set focus
		$("#query_string").focus();

		handleUrlQuery();

		// automagic scrolling
		$(window).scroll(function(){
			if ($(window).scrollTop() >= $(document).height() - ($(window).height() * 3)){
				performPrefixNextPage();
			}
		});

		// Perform search to display top-level prefixes
		performPrefixSearch(true);

	});

</script>

{% endblock %}

{% block body_attributes %}ng-controller="PrefixListController"{% endblock %}

{% block menu %}
<div id="search_box">
	{{ nipap.prefix_search_form(g.search_opt_parent, g.search_opt_child) }}
	<div style="position: absolute; right: 20px; top: 55px;">
        <div uib-dropdown class="btn-group">
            <button uib-dropdown-toggle type="button" class="btn btn-success">
                Add prefix <span class="caret"></span>
            </button>
            <ul uib-dropdown-menu class="dropdown-menu" style="min-width: 120px">
                <li><a href="/ng/prefix#/prefix/add/manual">Manual</a></li>
                <li><a href ng-click="showAddPrefixFromPoolNotice()">From pool</a></li>
                <li><a href ng-click="showAddPrefixFromPrefixNotice()">From prefix</a></li>
            </ul>
        </div>
	</div>
</div>

{% endblock %}



{% block raw_content %}

{{ nipap.prefix_search_result() }}

<script type="text/ng-template" id="add_prefix_from_pool_notice.html">
    <div class="modal-header">
        <h3 class="modal-title">Adding prefix from pool</h3>
    </div>
    <div class="modal-body">
        Since version 0.27 adding prefixes from a pool is done from the <a href="/pool/list">pool list</a>.
        <img src="/static/images/add_prefix_from_pool_notice.png">
        <div style="text-align: center;">
            <button class="btn btn-primary" ng-click="$close()">OK, got it!</button>
        </div>
    </div>
</script>

<script type="text/ng-template" id="add_prefix_from_prefix_notice.html">
    <div class="modal-header">
        <h3 class="modal-title">Adding prefix from prefix</h3>
    </div>
    <div class="modal-body">
        Since version 0.27 adding prefixes from a prefix is done directly from the prefix list.
        <img src="/static/images/add_prefix_from_prefix_notice.png">
        <div style="text-align: center;">
            <button class="btn btn-primary" ng-click="$close()">OK, got it!</button>
        </div>
    </div>
</script>

{% endblock %}
